//侧边切换
$('.clothing-nav .clothing-nav1').hover(function () {
    var index = $(this).index();
    $('.clothing-contentboxA .clothing-contentbox').eq(index).show().siblings().hide();
}, function () {
    $('.clothing-contentboxA .clothing-contentbox').mouseenter(function () {
        $(this).show();
        var index = $(this).index();
        $('.clothing-nav .clothing-nav1').eq(index).addClass('clothing-nav1Color');
    });
    $('.clothing-contentboxA .clothing-contentbox').mouseleave(function () {
        $(this).hide();
        var index = $(this).index();
        $('.clothing-nav .clothing-nav1').eq(index).removeClass('clothing-nav1Color');
    });
    $('.clothing-contentboxA .clothing-contentbox').hide();
});

// 数据渲染模块
// 服饰区
function showData(data, arg1, ele) {
    //  data ---> 数据
    //  arg1 ---> 携带的参数
    //  ele ---> 插入数据的元素
    // ./details.html#${item.goodid}applianceData/hot  跳转网页的名字加上渲染的id再加上渲染到那
    var rels = '';
    $(ele).html('');
    data.forEach(function (item) {
        rels += `
        <li>
            <a href="./details.html#${item.goodid}clothesData/${arg1}" style="display: block;">
                <div class="img">
                    <img src="${item.goodurls.nowurl}" alt="">
                </div>
                <p>${item.goodtitle}</p>
                <div class="price">￥${item.goodzprice}</div>
            </a>
        </li>
        `;
    });
    $(ele).html(rels);
}
// 女装
showData(data.clothesData.girlclothes, 'girlclothes', '.clothing-oneC .showul');
// 男装
showData(data.clothesData.boyclothes, 'boyclothes', '.clothing-twoC .showul');
// 配件
showData(data.clothesData.peijian, 'peijian', '.clothing-threeC .showul');
// 内衣
showData(data.clothesData.neiyi, 'neiyi', '.clothing-fourC .showul');
// 运动户外
showData(data.clothesData.sport, 'sport', '.clothing-fiveC .showul');

// 随心购渲染
var rel = '';
data.clothesData.suibian.forEach(function (item) {
    rel += `
    <li>
    <a href="./details.html#${item.goodid}clothesData/suibian">
        <img src="${item.goodurls.nowurl}" alt="">
        <p>${item.goodzprice}</p>
        <p>${item.goodtitle}</p>
        <div class="btn">查看详情</div>
    </a>
    </li>    
    `
});
$('.clothing-convenientlyC ul').html(rel);



// 顶部轮播图板块
//设置全局变量 
var flag = 1,
    interId;
//1.获取元素节点 
var imgWarp = document.querySelectorAll(".clothing-img-wrap>li");
var circles = document.querySelectorAll(".clothing-circle-list span");
// 1.先给每个小圆点添加移入事件
for (var i = 0; i < circles.length; i++) {
    // 5.给小圆点一个索引
    circles[i].index = i;
    // 2.添加点击事件
    circles[i].onmouseover = function () {
        //3.先排他每次点击都先清除所有的active
        for (var i = 0; i < circles.length; i++) {
            circles[i].className = "";
        }
        // 4.再给点击当前小圆点时给他添加active样式
        this.className = "active";
        // 6.添加动画
        flag = this.index;
        imgWarp[flag].className = "showtu";
    }
}
// 自动轮播
function autoAnimation() {
    interId = setInterval(function () {
        // 3.判断flag 
        if (flag == circles.length) {
            flag = 0;
        }
        // 2.排他
        for (var i = 0; i < circles.length; i++) {
            circles[i].className = "";
            imgWarp[i].className = "";
        }
        // 1.自动获取小圆点
        circles[flag].className = "active";
        // 4.自动轮播图片
        imgWarp[flag].className = "showtu";
        flag++;
    }, 2000)

}
autoAnimation();
// 鼠标移入事件
circles.onmouseover = function () {
    // 清除定时器
    clearInterval(interId);
};
circles.onmouseout = function () {
    // 鼠标离开打开自动轮播
    autoAnimation();
};
imgWarp.onmouseover = function () {
    // 清除定时器
    clearInterval(interId);
};
imgWarp.onmouseout = function () {
    // 鼠标离开打开自动轮播
    autoAnimation();
};


//服饰区下面的tab切换
$('.chooseTab .one li').hover(function () {
    var index = $(this).index();
    $(this).addClass('tabon').siblings().removeClass('tabon');
    $('.clothing-oneC ul').eq(index).fadeIn(1000).siblings().fadeOut(1000);
});
$('.chooseTab .two li').hover(function () {
    var index = $(this).index();
    $(this).addClass('tabon').siblings().removeClass('tabon');
    $('.clothing-twoC ul').eq(index).fadeIn(800).siblings().fadeOut(800);
});
$('.chooseTab .three li').hover(function () {
    var index = $(this).index();
    $(this).addClass('tabon').siblings().removeClass('tabon');
    $('.clothing-threeC ul').eq(index).fadeIn(800).siblings().fadeOut(800);
});
$('.chooseTab .four li').hover(function () {
    var index = $(this).index();
    $(this).addClass('tabon').siblings().removeClass('tabon');
    $('.clothing-fourC ul').eq(index).fadeIn(800).siblings().fadeOut(800);
});
$('.chooseTab .five li').hover(function () {
    var index = $(this).index();
    $(this).addClass('tabon').siblings().removeClass('tabon');
    $('.clothing-fiveC ul').eq(index).fadeIn(800).siblings().fadeOut(800);
});


//随心购的轮播的两个按钮
// 点击下一个开关--避免多次点击造成的bug
$(function () {

    var flagNext = true;
    $(".clothing-convenientlyC .next").click(function () {
        // shownext();
        if (flagNext) {
            flagNext = false;
            $(".clothing-convenientlyC .prev").prop('disabled', false);
            $(".clothing-convenientlyC ul").stop().animate({
                left: "-=" + 1200
            }, function () {
                var aa = $(".clothing-convenientlyC ul").position().left
                var bb = Math.ceil(aa / 1200) * -1;
                $('.clothing-convenientlyT li').eq(bb).addClass('convenientlyTOn').siblings().removeClass('convenientlyTOn');
                if (Math.ceil(aa) == -2400) {
                    $('.clothing-convenientlyC .next').prop('disabled', true);
                };
                flagNext = true;
            });
        }
    });
    //点击上一个prev
    var flagPrev = true;
    $(".clothing-convenientlyC .prev").click(function () {
        // showprev();
        console.log($(".clothing-convenientlyC ul").position().left);
        if (flagPrev) {
            flagPrev = false;
            $(".clothing-convenientlyC .next").prop('disabled', false);
            $(".clothing-convenientlyC ul").stop().animate({
                left: "+=" + 1200
            }, function () {
                var aa = $(".clothing-convenientlyC ul").position().left;
                var bb = Math.ceil(aa / 1200) * -1;
                $('.clothing-convenientlyT li').eq(bb).addClass('convenientlyTOn').siblings().removeClass('convenientlyTOn');
                if ($(".clothing-convenientlyC ul").position().left == 0) {
                    $(".clothing-convenientlyC .prev").prop('disabled', true);
                };
                flagPrev = true;
            });

        };
    });

    // 随心购的小圆点
    var flag = true;
    $('.clothing-convenientlyT li').mouseenter(function () {
        if(flag){
            flag = false;
            var weizhi = $(this).index() * -1200;
            $(".clothing-convenientlyC ul").stop().animate({
                left: weizhi
            });
            $(this).addClass('convenientlyTOn').siblings().removeClass('convenientlyTOn');
            flag = true;
        }
    });

});


//楼层导航
// 1.先让侧边栏出现
$(window).scroll(function () {
    if ($(window).scrollTop() >= $('.flashsale').offset().top) {
        $('.clothing-aside').fadeIn();
    } else {
        $('.clothing-aside').fadeOut();
    };
    // 对楼层导航遍历
    $('.clothing-floor').each(function (index, value) {
        if ($(window).scrollTop() >= value.offsetTop) {
            $('.clothing-aside li').eq(index).css('backgroundColor', '#fc5f8d').siblings().css('backgroundColor', '#a3a0a1')
        }
    });
});

// //楼层点击的时候跳到当前的楼层
$('.clothing-aside li').click(function () {
    //获取楼层侧边导航的自定义value值
    var floor = $(this).data('aside');
    console.log(floor);
    //把楼层导航的值赋给楼层内容值，获取当前的top的值
    var floorContent = $("div[data-content=" + floor + "]").offset().top;
    console.log($("div[data-content=" + floor + "]").offset().top);
    $('html').animate({
        'scrollTop': floorContent
    }, 300);
});

// 楼层导航 回到顶部
var top1 = document.querySelector('.clothing-aside .top');
top1.onclick = function () {
    //获取window被卷进去的距离
    var winscroll = window.pageYOffset;
    var interID = setInterval(function () {
        winscroll = winscroll - 120;
        //到顶部清除定时器
        if (winscroll <= 0) {
            clearInterval(interID);
        }
        window.scroll(0, winscroll);
    }, 30);
}


